<template>
  <div class="layout-pd">
    <zh-space style="padding-top: 10px">
      <zh-card title="">
        <zh-form ref="processForm" :model="state.queryParam">
          <zh-form-select
              prop="processKey"
              label="业务名称"
              placeholder="单选"
              :options="state.dictData.processNameList"
              v-model="state.queryParam.processKey"
          ></zh-form-select>
          <zh-form-query
              v-model="state.advanced"
              :form-ref="processForm"
              :table-ref="processTable"
          >
            <zh-button style="margin-left: 8px" button-type="add" @click="openForm"> 新增 </zh-button>
          </zh-form-query>
        </zh-form>
      </zh-card>
      <zh-table
          ref="processTable"
          title="配置信息"
          :height="600"
          funcCode="flowLongDeploy007"
          :columns="state.tableColumn"
          :radio-config="{ trigger: 'row' }"
          :disabled="false"
          highlight-current-row
      >
        <template #operate="{ row }">
          <zh-button style="margin-left: 8px" button-type="edit" @click="openForm(row)">
            修改
          </zh-button>
          <zh-button style="margin-left: 8px" button-type="del" @click="deleteOneUserConfig(row.id)">删除</zh-button>
        </template>
      </zh-table>
    </zh-space>
    <zh-dialog :title="state.modalTitle" width="50%" v-model="state.visible" @confirm="handleData">
      <userConfigForm ref="formPage" :form="state.selectRow"/>
    </zh-dialog>

  </div>
</template>

<script lang="ts" setup name="actorUserConfig">
//------------------定义子组件---------------------------
import {ref, onMounted, nextTick} from "vue";
import userConfigForm from './component/userConfigForm.vue'
import {ElMessage} from "element-plus";

const processTable = ref<any>({});
const flowLongPage = ref<any>({});
const formPage = ref(null);

//------------------内部变量定义-------------------------
const state = reactive({
  modalTitle: undefined,
  visible: false,
  dictData: {} as any,
  form: null,
  // 高级搜索 展开/关闭
  advanced: false,
  // 查询参数
  queryParam: {
    processKey: ""
  } as any,
  // 表头
  loading: false,
  tablePage: {
    total: 0,
    currentPage: 1,
    pageNum: 1,
    pageSize: 20,
  },
  tableColumn: [
    {type: "seq", width: 80, fixed: "left", align: "center", title: "序号"},
    {
      field: "processName",
      title: "业务名称",
      align: "center",
      fixed: "left",
      width: 200,
      editRender: {},
    },
    {field: "transferStartTime", title: "转办开始时间", align: "center", width: 150},
    {field: "transferEndTime", title: "转办结束时间", align: "center", width: 120},
    {field: "transferFullName", title: "被转办人员", align: "center", width: 200},
    {field: "transferReason", title: "转办原因", align: "center"},
    {
      field: 'operate',
      title: '操作',
      align: 'center',
      width: 200,
      slots: {
        // 使用插槽模板渲染
        default: 'operate',
      },
    },
  ],
  tableData: [],
  selectRow: null as any,
});

//------------------定义调用方法-------------------------
function openForm(row) {
  if(row){
    state.modalTitle = '修改'
    const nodeUserList = []
    nodeUserList.push({id: row.transferUserId,name: row.transferFullName})
    state.selectRow = row
    state.selectRow.nodeUserList = nodeUserList
  }else {
    state.modalTitle = '新增'
    state.selectRow = null
  }
  state.visible = true
}

function findBusiData() {
  processTable.value.query(state.queryParam);
}

function refreshList() {
  state.visible = false
  processTable.value.refresh(state.queryParam);
}

function handleData() {
  const data = formPage.value.getData();
  if(data === null) {
    return;
  }
  $api.common.send
      .post('flowLongDeploy008', data)
      .then((res) => {
        refreshList();
      })
      .catch(() => {
      });
}

const deleteOneUserConfig = (id)=> {
  $api.common.send
      .post('flowLongDeploy008', {id,flag: 'delete'})
      .then((res) => {
        ElMessage.success("删除成功");
        refreshList();
      })
      .catch(() => {
      });
}

//------------------初始化------------------------------

// 数据字典初始化
const initDict = () => {
  $api.common.send
      .post('flowLongQuery010', {})
      .then((res) => {
        state.dictData.processNameList = res.result
        state.dictData.processNameList.forEach(item => {
          item.dictValue = item.processName
          item.dictKey = item.processKey
        })
      })
      .catch(() => {
      });
};

onMounted(() => {
  nextTick(() => {
    initDict();
    findBusiData();
  });
});
</script>
<style lang="scss" scoped></style>
